<template>
    <div>
        <!-- <input
            :value="modelValue"
            @input="$emit('update:modelValue', $event.target.value)"
        /> -->
        <input type="text" v-model="groupName" placeholder="请输入内容">  
        <p>{{ prop.msg }}</p>  
    </div>
</template>

<script setup lang="js">
    defineOptions({
        name: 'DefineModel', // 组件名称
    })
    const prop = defineProps(['msg'])
    // 以前更新model值绑定和更新
    // defineProps(['modelValue'])
    // defineEmits(['update:modelValue'])

    // 声明model变量，父组件用v-model绑定
    const groupName = defineModel({ type: String, default: () => '8888' })
    // const [groupName, modelModifiers] = defineModel({
    //     type: String, 
    //     default: () => '8888',
    //     set(value) {
    //         if (modelModifiers.trim) {
    //             // 去掉输入框空格符，并自动拼接真实字符串
    //             return value.replace(/\s+/g, '')
    //         }
    //         return value
    //     }
    // })
    // js中通过xxx.value形式访问和修改model值
    groupName.value = '3333'
</script>